<template>
  <div class="header" :class="!tabPath?'minHeader':''">
    <!-- 导航 -->

    <transition name="fade">
      <div class="nav" :class="active?'tops':'' ">
        <div class="headerTop">
          <div class="top">
            <div class="left">
              <!-- logo -->
              <img class="logo max" src="@/assets/image/logo2.png" alt="logo">
              <img class="logo min" src="@/assets/image/logo2.png" alt="logo">
            </div>
            <div class="right">
              <div><a style="color:#333333;" id="cniil_wza" href="javascript:void(0)" onclick="aria.start()">开启辅助工具</a></div>
              <div @click="$message.error('暂未开放')">干部学院</div>
              <div v-show="$store.state.token" @click="$router.push('/personalCenter/myMessage')">消息</div>
              <div @click="$router.push('/enterpriseCenter/information')" v-show="$store.state.token" class="avator" style="line-height:28px;">
                <div class="imgavtor" v-if="$store.state.picture" :style="'background-image: url('+($store.state.localImgFlag == 'N'?'':imageWebUrl) + $store.state.picture+')'"></div>
                <div class="imgavtor" v-else :style="'background-image: url('+require('@/assets/image/employment/portrait.png')+')'"></div>
                <!-- <img style="width:28px;height:28px;display:inline-block;margin-right:8px;border-radius:50%;"
                     :src="$store.state.picture?imageWebUrl + $store.state.picture:require('@/assets/image/employment/portrait.png')" alt=""> -->
                <p>{{$store.state.nickName}}</p>
              </div>
              <div v-show="!$store.state.token">
                <a-button @click="login">登录/注册</a-button>
              </div>
            </div>
          </div>
        </div>
        <div class="headerBottom">
          <div class="bottom">
            <router-link tag="a" :to="item.to" v-for="(item,index) in oneNav" :key="index" >
              <div :class="tabIndex==index?'click':''"><span>{{item.title}}</span></div>
            </router-link>
            <p></p>
          </div>
        </div>
      </div>
    </transition>

    <!-- 登录 -->
    <Login ref="login" />

    <!-- 注册 -->
    <BindingPhone ref="BindingPhone" />
  </div>
</template>

<script>
// 登录
import Login from '@/components/popup/login/index.vue'
// 注册
import BindingPhone from '@/components/popup/register/BindingPhone.vue'
export default {
  components: { Login, BindingPhone },
  data(){
    return{
      tabIndex: null,
      tabPath: true,
      oneNav: [
        {
          title: '首页',
          to: '/',
          name: 'home',
          path: 'home',
        },
        {
          title: '大赛活动',
          to: '/competition',
          name: 'competition',
          path: 'competition',
        },
        {
          title: '教育培训',
          to: '/education',
          name: 'educationHome',
          path: 'education'
        },
        {
          title: '创业就业',
          to: '/employment',
          path: 'employment',
          name: 'employmentHome'
        },
        {
          title: '幸福文旅',
          to: '/activity',
          path: 'activity',
          name: 'activityHome'
        },
        {
          title: '康复服务',
          to: '/service',
          path: 'service',
          name: 'service'
        },
        {
          title: '生活维权',
          to: '/safeguarding',
          path: 'safeguarding',
          name: 'safeguarding'
        },
        {
          title: '阳光商城',
          to: '/shop',
          path: 'shop',
          name: 'shop'
        },
        {
          title: '关于我们',
          to: '/companyProfile',
          path: 'companyProfile',
          name: 'companyProfile'
        }
      ],
      active:false
    }
  },
  watch: {
    $route(e){
      this.onTab()
    },
    activeKey(key) {
        return key;
    }
  },
  methods:{
    login(){
      this.$refs['login'].tabIndex = 0;
      this.$refs['login'].tabType = 0;
      this.$refs['login'].maskClosable = true;
      this.$refs['login'].visible = true;
    },
    onMouseover(e){
      this.tabIndex = e
    },
    onTab(){
      let e = this.$route
      this.tabIndex = null
      // this.tabPath = false
      // console.log(e)
      this.oneNav.forEach((item,index)=>{
        // 当前选中的下标
        if(e.matched != ''){
          if(item.path == e.matched[0].name){
            this.tabIndex = index
          }
          // console.log(e.matched[0].name);
          if(this.$route.query.type != ''){
            if(this.$route.query.type == '科普'){
              this.tabIndex = 4
            }else if(this.$route.query.type == '创业就业' || this.$route.query.type == '政策'){
              this.tabIndex = 2
            }else if(this.$route.query.type == '案例'){
              this.tabIndex = 5
            }else if(this.$route.query.type == '新闻资讯'){
              this.tabIndex = 0
            }
            if(this.$route.query.type == '新闻列表'
            ||this.$route.query.type == '创业列表'
            ||this.$route.query.type == '康复服务'
            ||this.$route.query.type == '科普列表'
            ||this.$route.query.type == '事件列表'
            ||this.$route.query.type == '通知公告'
            ||this.$route.query.pageId == '首页'){
              this.tabIndex = 0
            }
          }
        }
        // 当前是否是首页
        // console.log(item, item.name, e.name)
        if(item.name == e.name){
          this.tabPath = true
        }
      })
    },
    cniil(){
      this.active = true
    },
    windowScroll() {
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop);
      if(scrollTop > 800){
        this.tabPath = false
      }else if(scrollTop < 600){
        this.tabPath = true
      }
    }
  },
  created(){
    this.onTab()
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', this.windowScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScroll,false)
  }
}
</script>

<style lang="less" scoped>
.avator{
  display: flex;
  min-width: 100px;
  .imgavtor{
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-right: 10px;
      border-radius: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
  }
  p{

  }
}
.header{
  height: 110px;
  &.minHeader{
    height: 0;
    .nav{
      &::before{
        background-image: none;
        //background-color: #fff;
        height: 110px;
        box-shadow: 0 0 5px rgba(0,0,0,0.04);
      }
      .top{
        .left{
          .logo{
            display: none;
            &.min{
              display: block;
            }
          }
        }
        .right{
          color: #333!important;
          a{
            color: #333!important;
          }
        }
      }
      .headerBottom{
        width: 100%;
        height: 49px;
        background: #232D32;
        transition:all ease-in 0.25s;
        opacity: 0.93;
        .bottom{
          a{
            span{
              color: #EEB336;
            }
            color: #EEB336;
          }
        }
      }
    }
  }
  .headerTop{
    width: 100%;
    height:60px;
    background: #fff;
  }
  .nav{
    height: 112px;
    position: fixed;
    left: 0;
    right: 0;
    top: -1px;
    z-index: 999;
    &::before{
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 132px;
      //background: url("../../assets/image/head-bg.png") center repeat-x;
      background-size: auto 99%;
      z-index: -3;
    }
    .top{
      display: flex;
      flex-direction: row;
      padding-top: 12px;
      max-width: 1200px;
      margin: 0 auto;
      .left{
        flex: 1;
        height: 40px;
        .logo{
          height: 40px;
          &.min{
            display: none;
          }
        }
      }
      .right{
        // color: #fff;
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        >div{
          cursor: pointer;
          margin-left: 32px;
          button{
            //border-color: @theme;
            //background-color: rgba(0,0,0,0);
            font-weight: 700;
            background: #FFBE37;
            color: #333333
          }
        }
      }
    }
    .headerBottom{
      width: 100%;
      height: 50px;
      transition:all ease-in 0.25s;
      .bottom{
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        background: #232D32;
        height: 49px;
        transform: skewX(-20deg);
        padding: 0 40px;
        //margin-top: 25px;
        a{
          color: #EEB336;
          margin: 0;
          //margin-right: 40px;
          text-align: center;
          flex: 1;
          font-size: 16px;
          line-height: 45px;
          display: block;
          cursor: pointer;
          height: 45px;
          transform: skewX(20deg);
          margin: 0 10px;
          div{
            span{
              color: #EEB336;
            }
            position: relative;
            transition: all 0.3s;
            &::after{
              content: '';
              width: 0;
              height: 2px;
              border-radius: 1px;
              background-color: @theme;
              display: block;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: -10px;
              transition: all 0.6s;
            }
            &:hover{
              font-weight: 700;
              //color: @theme;
              //&::after{
              //  width: 44px;
              //}
            }
            &.click{
              color:#000;
              //background: #FFBE37;
              background: url("../../assets/image/navBg.png") no-repeat center top;
              background-size: 100% 100%;
              //transform: skewX(-20deg);
              //color: @theme;
              //&::after{
              //  width: 44px;
              //}
              span{
                color:#000;
                display: inline-block;
                //transform: skewX(20deg);
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
  .tops{
    top:100px
  }
  //这是css样式
  .fade-leave-to{
    opacity:0;
    transform: translate3d(0,300px,0);
  }
  .fade-enter{
    transform: translate3d(0,-300px,0);
  }
  .fade-leave-active,.fade-enter-active{
    transition: .5s all ease;
  }
}
</style>
